<template>
  <div class=" bonochtester" v-loading="loading" >
    <el-form @keyup.enter.native="listenEvent()" :model="form" :rules="rules"  ref="form">
      <div :class="{'heightIndex': curIndex == 0 }" class="welcome">
        <div>
          
          <p class="p1 center"> bonoch Tester Program</p>
          <p class="p2">At bonoch, we believe smart deligts life. In order to bring better life, we need your honest voice to help us perfect our design. That's why we are starting bonoch Testers Program. You'll get exclusive discounts on up-coming new products, free units, and other loyalty rewards. Apply now if you want a say in the products you bring into your life.</p>
           <div class="btn1 " @click="listenEvent">
             <p class="readMore"><span>{{$t('WARRANTYFORM.PAGE1-3')}} </span><i class="iconfont icon-arrow_2 "></i></p>
            <!-- <el-button @click="listenEvent">{{$t('WARRANTYFORM.PAGE1-3')}}</el-button> -->
          </div>
          
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 1 }">
        <div>
          <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <p class="p1">{{$t('WARRANTYFORM.PAGE2-1')}} <span>{{$t('WARRANTYFORM.PAGE2-2')}}</span>{{$t('WARRANTYFORM.PAGE2-3')}} </p>
          </div>
          <el-form-item prop="truename">
            <input v-model="form.truename" :class="{'form_textbox_enter': form.truename}" @change="validateValue('truename')" >
            <span class="form_label" >{{$t('WARRANTYFORM.PAGE2-2')}}</span>
          </el-form-item>
          <div class="btn2">
            <el-button @click="listenEvent"  :class="{'is-disabled': isItemCheck('truename')}">{{$t('CONTACTUS.NEXT')}}</el-button> 
          </div>
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 2}">
        <div>
          <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <div>
              <p class="p1 ">{{$t('WARRANTYFORM.PAGE3-1')}}<span>{{$t('WARRANTYFORM.PAGE3-2')}}</span>{{$t('WARRANTYFORM.PAGE3-3')}}</p>
              <p class="p3">{{$t('WARRANTYFORM.PAGE3-4')}}</p>
            </div>
          </div>
          <el-form-item prop="email">
            <input v-model="form.email" @change="validateValue('email')" :class="{'form_textbox_enter': form.email}">
             <span class="form_label" >{{$t('WARRANTYFORM.PAGE3-2')}}</span>
          </el-form-item>
          <div class="btn3">
            <el-button class="back" type="del" @click="backBtnClick">{{$t('CONTACTUS.BACK')}}</el-button> 
            <el-button class="next" @click="listenEvent"  :class="{'is-disabled': isItemCheck('email')}">{{$t('CONTACTUS.NEXT')}}</el-button> 
          </div>
        </div>
      </div>
      <div :class="{'heightIndex': curIndex == 3 }">
        <div>
          <div class="warranty_title_container">
            <i class="iconfont icon-Required"></i>
            <p class="p1">Which Product are you interested in?</p>
          </div>
          <el-form-item  prop="interested_testing">
            <el-select v-model="form.interested_testing"  @change="validateValue('interested_testing')" clearable> 
              <el-option v-for="item in testList"  :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <div class="btn3">
            <el-button class="back" type="del" @click="backBtnClick">{{$t('CONTACTUS.BACK')}}</el-button> 
            <el-button class="next"  @click="submitData" :class="{'is-disabled': !isSubmit}" :loading="isRequest">{{$t('WARRANTYFORM.submit')}}</el-button> 
          </div>
        </div>
      </div>
    </el-form>
    <div class="contronal" v-show="curIndex > 0">
      <el-progress :percentage="percentage" color="#363434" :format="format"></el-progress>
 
    </div>
    <div class="btn_container" v-show="curIndex > 0">
      <span @click="backBtnClick" :class="{'disabled': curIndex < 2 }">
        <i class="iconfont icon-arrow_2"></i>
      </span>
      <span @click="nextBtnClick" :class="{'disabled': curIndex > 2 }">
        <i class="iconfont icon-arrow_2"></i>
      </span>
    </div>

  </div>
</template>
<script>
import { betaTester } from '@/api/register.js'
import { timeFormat } from '@/utils/index.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      curIndex: 0,
      loading: false,
      isRequest: false,
      registrationImg: require("@/assets/BONOCH_Tester.png") ,
      testList: [
        {value: 'Baby monitor', label: 'Baby monitor'},
        {value: 'Video doorbell', label: 'Video doorbell'},
        {value: 'Smart curtain robot', label: 'Smart curtain robot'},
        {value: 'Just bonoch', label: 'Just bonoch'},
      ],
      form:{
        truename:"",
        email: '',
        interested_testing: '',
      },
      rules: {
        truename: [
          { required: true, trigger: 'change' }
        ],
        email:[
          { required: true, message:  this.$t('CONTACTUS.ENTEREMAILADDRESS'), trigger: 'blur' },
          { type: 'email', message: this.$t('DEFAULT.CORRECTEMAIL'), trigger: 'blur' }
        ],
        interested_testing: [
          { required: true, trigger: 'change' }
        ],
      },
      isCheck:[],
      percentage: 0,
      isSubmit: false
    }
  },
  computed:{
    ...mapGetters(['curSite']),
  },


  mounted () {

  },
  methods: {
    format() {
      return this.isCheck.length +this.$t('WARRANTYFORM.of')+`3 `+ this.$t('WARRANTYFORM.answered');
    },
    isFormValid () { 
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isSubmit = true
          return true
        } else {
          this.isSubmit = false
          return false;
        }
      })
    },
    submitData() {
      if(this.isSubmit){
        this.addData()
      }
    },
    addData (){
      this.isRequest = true
      let params = this.form
      params.language = this.curSite.site
      params.local_time = timeFormat(new Date()),
      betaTester(params).then(res=>{
        if(res.state == 1 ){
          this.$router.push('/bonochtester_success')
        }
        this.isRequest = false
      })
    },
    nextBtnClick(){
      if(this.curIndex < 3) {
        this.curIndex += 1
      }
    },
    backBtnClick(){
      if(this.curIndex > 1) {
        this.curIndex -= 1
      }
     
    },
    isItemCheck(item) {
      this.percentage = this.isCheck.length/3 *100
      return this.isCheck.indexOf(item) == -1
    },
    listenEvent () {
      let value = ''
      switch ( this.curIndex) {
        case 0 :
          this.curIndex += 1
          break;
        case 1 :
          value = !this.isItemCheck('truename')
          if(value) {
            this.curIndex += 1
          }
          break;
        case 2 :
          value = !this.isItemCheck('email')
          if(value) {
            this.curIndex += 1
          }
          break;
        case 3 :
          value = !this.isItemCheck('store')
          if(value) {
            this.curIndex += 1
          }
          break;
        case 4 :
          value = !this.isItemCheck('purchased_item')
          if(value) {
            this.curIndex += 1
          }
          break;
      }
      
    },
      // 表单字段校验
    validateValue(value){
      this.$refs.form.validateField([value], (msg)=>{
        let isInCheck = this.isCheck.indexOf(value) > -1
        if(!msg){ 
          if(!isInCheck) {
            this.isCheck.push(value)
          }
        } else {
          this.isCheck.remove(value)
        }

      })
       if(this.curIndex == 3){
        this.isFormValid()
      }
    },


    
    

  }
}
</script>

<style lang="scss">
@import '@/styles/register/bonochtester.scss';

</style>